<template>
	<scroll ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
	 @emptyclick="emptyClick">
		<stop isBack>
			<view slot="content">交流空间</view>
		</stop>
		<view class="bcf padt5">
			<view class="pad2 bdbdo" v-for="row in data" :key="log.id">
				<view class="flex-r flex-start">
					<view class="wh15-15 round ofh  bdso">
						<image :src="pic(row.user.pic)" mode="aspectFill" class="wh15-15"></image>
					</view>
					<view class="marl3 flex1 marr3">
						<view class="fs12 c12 fwb lh15">{{row.user.name}}</view>
						<view class="fs8 c12">{{datetime(row.createAt)}}</view>
						<view class="padtb2">
							{{row.text}}
						</view>
						<view v-if="row.pics.length > 0">
							<!-- 一张图的布局 -->
							<view v-for="item in row.pics" style="max-height: 40vw;" class="ofh" v-if="row.pics.length == 1">
								<image :src="pic(item)" @tap="viewPic(pic(item),pics(row.pics))" mode="aspectFill" class="w100"></image>
							</view>
							<view class="flex-r flex-wrap flex-start">
								<view v-for="item in row.pics" v-if="row.pics.length == 2 || row.pics.length == 4 " style="max-height: 40vw;"
								 class="ofh padr1 padb1">
									<image :src="pic(item)" @tap="viewPic(pic(item),pics(row.pics))" mode="aspectFill" class="wh30-30"></image>
								</view>
							</view>
							<view class="flex-r flex-wrap flex-start">
								<view v-for="item in row.pics" v-if="row.pics.length == 3 || row.pics.length >= 5 " style="max-height: 40vw;"
								 class="ofh padr1 padb1">
									<image :src="pic(item)" @tap="viewPic(pic(item),pics(row.pics))" mode="aspectFill" class="wh20-20"></image>
								</view>
							</view>
						</view>
						<view class="padtb3">
							<view class="flrc c12">
								<view class="flex1"></view>
								<slove :itemId="row.id" src="/api_/zones"></slove>
							<!-- 	<view @click="zanIt(row.id)" class="cu-btn round bg-white">
									<text class="fa fa-heart-o"></text>
									<text class="padl1" v-if="row.love*1 === 0">点赞</text>
									<text class="padl1" v-if="row.love*1 > 0">{{row.love}}</text>
									<ripple></ripple>
								</view> -->
								<view class="padl5 cu-btn round bg-white" @tap="goto('/pages/zone/comments?id=' + row.id)">
									<text class="fa fa-comment-o"></text>
									<text class="padl1" v-if="row.comment*1 === 0">评论</text>
									<text class="padl1" v-if="row.comment*1 > 0">{{row.comment}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<loading :loading="myIsLoading"></loading>
		<view class="pos-f r9 b9">
			<view class="pad2 bca01 round pos-r ofh" @tap="goto('/pages/zone/new')">
				<view class="wh10-10 flcc bc02 cf round fs14">
					<view class="fa fa-plus"></view>
				</view>
				<ripple></ripple>
			</view>
		</view>
	</scroll>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import List from '../../assets/js/list.js'
	import Zan from '../../assets/js/zan.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			let list = new List()
			return {
				list,
				data: [],
				dataInfo:{},
				where: {
					eq: {
						status: '',
						category: '',
						groups: '',
					}
				},
				search: "",
				src: "/api_/zones"
			}
		},
		methods: {
			reload() {
				this.showLoading()
				this.list.setData({
					_order: {
						id: "DESC"
					},
					_where: this.where,
					_search: this.search,
					_g: ['user', 'zone']
				}).reload()
			}
		},
		mounted() {
			this.list.initMescroll(this).setUrl('/api/zones').setData({
				_order: {
					id: "DESC"
				},
				_where: this.where,
				_search: this.search,
				_g: ['user', 'zone']
			}).setCbFunc(res => {
				this.data = res
				this.clearLoading()
			}).reload()
		},
		onLoad(option) {
			//获取赞过的记录
			this.$api.get('/api/me/zanTos', {src:this.src}, res => {
				this.$com.setLocData('srcs' + this.src, res.d)
			})
		},
		onShow() {
			this.list.reload()
		}
	}
</script>

<style>

</style>
